<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		p{
			color: green;
		}
		#bianse{
			color: green;
		}
		body{
			margin-left: 550px;
		}
			#box1{
				width: 400px;
				height: 300px;
				border: 1px solid grey;
			}
			#boxone{
				width: 150px;
				height: 100px;
				border:1px solid black;
				background-color: lightskyblue;				
			}
			#box2{
				width: 400px;
				height: 300px;
				border: 1px solid grey;
			}
			#boxtwo{
				width: 150px;
				height: 100px;
				border:1px solid black;
				background-color: lightskyblue;				
			}
			#box3{
				width: 400px;
				height: 300px;
				border: 1px solid grey;
			}
			#boxthree{
				width: 150px;
				height: 100px;
				border:1px solid black;
				background-color: lightskyblue;				
			}
			#box4{
				width: 400px;
				height: 300px;
				border: 1px solid grey;
			}
			#boxfour{
				width: 150px;
				height: 100px;
				border:1px solid black;
				background-color: lightskyblue;				
			}
			.b1{
				transform: translate(10px);
			}
			.b2{
				transform: translate(20px);
			}
			.b3{
				transform: translate(20px,10px);
			}
			.b4{
				transform: translate(20px,10px);
			}
			.b5{
				transform: translate(50px,50px);
			}
			.b6{
				transform: translate(100px,100px);
			}
			.b7{
				transform: translate(-25px,-25px);
			}
			.b8{
				transform: translate(0px,0px);
			}
			.bo1{
				transform: rotate(10deg)
			}
			.bo2{
				transform: rotate(20deg)
			}
			.bo3{
				transform: rotate(30deg)
			}
			.bo4{
				transform: rotate(40deg)
			}
			.bo5{
				transform: rotate(45deg)
			}
			.bo6{
				transform: rotate(50deg)
			}
			.bo7{
				transform: rotate(60deg)
			}
			.bo8{
				transform: rotate(70deg)
			}
			.bo9{
				transform: rotate(80deg)
			}
			.bo10{
				transform: rotate(90deg)
			}
			.bo11{
				transform: rotate(100deg)
			}
			.bo12{
				transform: rotate(110deg)
			}
			.bo13{
				transform: rotate(120deg)
			}
			.boo1{
				transform: scale(1.5,1.5);
			}
			.boo2{
				transform: scale(2,2);
			}
			.boo3{
				transform: scale(2.5,2.5);
			}
			.boo4{
				transform: scale(3,3);
			}
			.boo5{
				transform: scale(3.5,3.5);
			}
			.boox1{
				transform: skew(10deg,20deg);
			}
			.boox2{
				transform: skew(20deg,20deg);
			}
			.boox3{
				transform: skew(30deg,20deg);
			}
			.boox4{
				transform: skew(40deg,20deg);
			}
			.boox5{
				transform: skew(50deg,20deg);
			}
			
		</style>
		<script type="text/javascript">
			function ra1(){
				var boxone=document.getElementById("boxone");
				boxone.className="b1"
			}
			function ra2(){
				var boxone=document.getElementById("boxone");
				boxone.className="b2"
			}
			function ra3(){
				var boxone=document.getElementById("boxone");
				boxone.className="b3"
			}
			function ra4(){
				var boxone=document.getElementById("boxone");
				boxone.className="b4"
			}
			function ra5(){
				var boxone=document.getElementById("boxone");
				boxone.className="b5"
			}
			function ra6(){
				var boxone=document.getElementById("boxone");
				boxone.className="b6"
			}
			function ra7(){
				var boxone=document.getElementById("boxone");
				boxone.className="b7"
			}
			function ra8(){
				var boxone=document.getElementById("boxone");
				boxone.className="b8"
			}
			function rad1(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo1"
			}
			function rad2(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo2"
			}
			function rad3(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo3"
			}
			function rad4(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo4"
			}
			function rad5(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo5"
			}
			function rad6(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo6"
			}
			function rad7(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo7"
			}
			function rad8(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo8"
			}
			function rad9(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo9"
			}
			function rad10(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo10"
			}
			function rad11(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo11"
			}
			function rad12(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo12"
			}
			function rad13(){
				var boxone=document.getElementById("boxtwo");
				boxone.className="bo13"
			}
			function radi1(){
				var boxone=document.getElementById("boxthree");
				boxone.className="boo1"
			}
			function radi2(){
				var boxone=document.getElementById("boxthree");
				boxone.className="boo2"
			}
			function radi3(){
				var boxone=document.getElementById("boxthree");
				boxone.className="boo3"
			}
			function radi4(){
				var boxone=document.getElementById("boxthree");
				boxone.className="boo4"
			}
			function radi5(){
				var boxone=document.getElementById("boxthree");
				boxone.className="boo5"
			}
			function radio1(){
				var boxone=document.getElementById("boxfour");
				boxone.className="boox1"
			}
			function radio2(){
				var boxone=document.getElementById("boxfour");
				boxone.className="boox2"
			}
			function radio3(){
				var boxone=document.getElementById("boxfour");
				boxone.className="boox3"
			}
			function radio4(){
				var boxone=document.getElementById("boxfour");
				boxone.className="boox4"
			}
			function radio5(){
				var boxone=document.getElementById("boxfour");
				boxone.className="boox5"
			}
		</script>
	</head>
	<body>
		<p>1、移动</p>
		<div id="box1">
			<div id="boxone">MYDIV</div>
		</div>
		<div id="bianse">
		<input type="radio" name="btn" onclick="ra1()" />translate 10px<br />
		<input type="radio" name="btn" onclick="ra2()"/>translate 20px<br />
		<input type="radio" name="btn" onclick="ra3()"/>translate 20px 10px<br />
		<input type="radio" name="btn" onclick="ra4()"/>translate 20px 20px<br />
		<input type="radio" name="btn" onclick="ra5()"/>translate 50px 50px<br />
		<input type="radio" name="btn" onclick="ra6()"/>translate 100px 100px<br />
		<input type="radio" name="btn" onclick="ra7()"/>translate -25px -25px<br />
		<input type="radio" name="btn" onclick="ra8()"/>none<br />
		</div>
		<p>2、旋转度数</p>
		<div id="box2">
			<div id="boxtwo">MYDIV</div>
		</div>
		<div id="bianse">
		<input type="radio" name="btn" onclick="rad1()" />rotate(10deg)<br />
		<input type="radio" name="btn" onclick="rad2()"/>rotate(20deg)<br />
		<input type="radio" name="btn" onclick="rad3()"/>rotate(30deg)<br />
		<input type="radio" name="btn" onclick="rad4()"/>rotate(40deg)<br />
		<input type="radio" name="btn" onclick="rad5()"/>rotate(45deg)<br />
		<input type="radio" name="btn" onclick="rad6()"/>rotate(50deg)<br />
		<input type="radio" name="btn" onclick="rad7()"/>rotate(60deg)<br />
		<input type="radio" name="btn" onclick="rad8()"/>rotate(70deg)<br />
		<input type="radio" name="btn" onclick="rad9()" />rotate(80deg)<br />
		<input type="radio" name="btn" onclick="rad10()"/>rotate(90deg)<br />
		<input type="radio" name="btn" onclick="rad11()"/>rotate(100deg)<br />
		<input type="radio" name="btn" onclick="rad12()"/>rotate(110deg)<br />
		<input type="radio" name="btn" onclick="rad13()"/>rotate(120deg)<br />
		</div>
		<p>3.scale 缩放</p>
		<div id="box3">
			<div id="boxthree">MYDIV</div>
		</div>
		<div id="bianse">
		<input type="radio" name="btn" onclick="radi1()" />scale 1.5,1.5<br />
		<input type="radio" name="btn" onclick="radi2()"/>scale 2,2<br />
		<input type="radio" name="btn" onclick="radi3()"/>scale 2.5,2.5<br />
		<input type="radio" name="btn" onclick="radi4()"/>scale 3,3<br />
		<input type="radio" name="btn" onclick="radi5()"/>scale 3.5,3.5<br />
		</div>
		<p>4.skew 翻转</p>
		<div id="box4">
			<div id="boxfour">MYDIV</div>
		</div>
		<div id="bianse">
		<input type="radio" name="btn" onclick="radio1()" />skew 10 20<br />
		<input type="radio" name="btn" onclick="radio2()"/>skew 20 20<br />
		<input type="radio" name="btn" onclick="radio3()"/>skew 30 20<br />
		<input type="radio" name="btn" onclick="radio4()"/>skew 40 20<br />
		<input type="radio" name="btn" onclick="radio5()"/>skew 50 20<br />
		</div>
	</body>
</html>
